<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: palegreen;
            transform: translate(500px, 500px);
        }

        section {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        body {
            width: 2000px;
            height: 4000px;
        }
    </style>
</head>

<body>

    <div id="box">
        <section>
            <span>lorem</span>
        </section>
    </div>

    <input type="text" id="text">

    <script>
        // ===== 事件对象 =====
        // 1.监听器上所绑定的函数会自动传入一个event对象,该对象包含了很多事件触发的相关信息
        // 2.事件对象以事件函数的形参出现，该对象不需要手动创建，会自动传入
        // 3.当事件发生时，只能在事件函数内部访问到该对象，处理函数结束后自动销毁
        let box = document.getElementById('box');
        box.addEventListener('click', function (event) {
            console.log(event);
        })

        // box.onclick = function (event) {
        //     console.log(event);

        // }

        //----- 事件对象通用属性
        //事件类型 event.type
        //事件目标 event.target
        // box.onclick = function (event) {
        //     console.log(event);
        //     // console.log(event.type);
        //     //发生点击事件的元素
        //     console.log(event.target);
        //     //----- 事件函数中的this 
        //     //绑定事件的元素 事件源
        //     console.log(this);

        //     console.log(event.button);
        // }

        // box.onmousemove=function(){
        //     console.log(event.type);
        // }


        //----- 事件坐标

        /**
         * event.clientX:事件发生时鼠标相对于浏览器页面的水平坐标(不包含窗口本身的控件及滚动条，只包含文档的可见部分)
         * event.clientY:事件发生时鼠标相对于浏览器页面的垂直坐标
         * event.pageX:事件发生时鼠标相对于当前窗口的水平坐标(包含窗口本身的控件及滚动条)
         * event.pageY:事件发生时鼠标相对于当前窗口的垂直坐标
         * event.screenX:鼠标相对屏幕左上角的水平坐标
         * event.screenY:鼠标相对屏幕左上角的垂直坐标
         * event.offsetX:鼠标相对事件源的水平坐标
         * event.offsetY:鼠标相对事件源的垂直坐标
        */

        /**
         * screen:相对于屏幕左上角
         * client:始终是视口的左上角，无论是否滚动页面
         * page:相对于文档的左上角，滚动的部分会被记入坐标中
         * offset:相对于事件源的左上角
        */

        box.onclick = function (event) {

            // console.log(event.clientX, event.clientY);
            console.log(event.pageX, event.pageY);
            // console.log(event.offsetX,event.offsetY);
        }


        // 练习：拖拽  
        //思考1:元素按下，元素怎么跟随意动
        //思考2:如果鼠标松开，元素就放在松开的位置
        //思考3:如何只在可视区域内拖拽


        //--- 键盘事件中的事件对象
        let input = document.getElementById('text');
        input.addEventListener('keydown', function (event) {
            // console.log(event.target);
            // console.log(event.type);
            // console.log(event.keyCode);//ascII码
            // ArrowLeft 37 ArrowUp 38 ArrowRight 39 ArrowDown 40
            console.log(event.key);//按键值
        })



    </script>



</body>

</html>